<template>
  <!-- 归还确认-业务待办 -->
  <!-- <base-breadcrumb :title="$route.meta.title"> -->
  <div>
    <a-spin :spinning="loading">
      <!-- 计量设备归还确认 -->
      <a-card :bordered="false">
        <title-name title="处理"></title-name>
        <div class="affirm-top">
          <a-form-model ref="ruleFormInfo" :model="confirmationReturnForm" :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 18 }" :rules="rules" id="base-breadcrumb"
                        style="position: relative">
            <div class="title-wrapper">
              <title-name title="计量设备归还确认"></title-name>
            </div>
            <div class="cr1">
              <custom-form :formList="formList" :form="confirmationReturnForm" :editModel="''"
                           :is-emit="false" :formComponents="$refs">
              </custom-form>
            </div>
          </a-form-model>
          <!-- 操作栏 -->
          <div class="btn_box" align="right" style="margin-top: 20px;">
            <a-button type="primary" :loading="loading" class="ml12" @click="handleSubmit()">
              确认处理</a-button>
          </div>
        </div>
      </a-card>
      <!-- 业务详情 -->
      <a-card :bordered="false">
        <h1>业务详情</h1>
        <a-form-model ref="ruleFormDetail" :model="ownForm" :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 18 }" id="base-breadcrumb" style="position: relative">
          <equipment-base-form-module :form="ownForm"
                                      :isAccessControl="false"
                                      :editModel="editModel" :isHasTime="true">
          </equipment-base-form-module>
        </a-form-model>
      </a-card>
    </a-spin>
    <div class="btn_box tool-btns--fixed page-btn-right-top">
      <a-button type="primary" @click="$close">关闭</a-button>
    </div>
    </div>
  <!-- </base-breadcrumb> -->
</template>

<script>
import moment from 'moment';
import api from '@/api/quality/recordDeviceReturnManagement' // api
import { detailsItem } from '@/api/quality/projectMeterageEquipmentAccount'
import UploadList from '@/components/UploadList'
import { receptionCondition } from '@/views/quality/equipmentManagement/constant/dictionary.js'
import equipmentBaseFormModule from '@/views/quality/equipmentManagement/module/equipmentBaseForm/index'
export default {
  name: "affirmReturn",
  components: {
    equipmentBaseFormModule
  },
  data() {
    return {
      loading: false, // 请求加载框
      editModel: 0,
      api,//api
      confirmationReturnForm: {},//待确认表单数据
      ownForm: {},//自有计量设备信息
    }
  },
  computed: {
    formList() {
      return [
        {
          type: 'a-input',
          keyName: 'mdName',
          label: '设备名称',
          disabled: true,
        },
        {
          type: 'a-input',
          keyName: 'specificationModel',
          label: '规格型号',
          disabled: true,
        },
        {
          type: 'a-input',
          keyName: 'mdCode',
          disabled: true,
          label: '设备编号'
        },
        {
          label: '设备图片',
          keyName: 'ownPicFileList',
          type: UploadList,
          span: 24,
          attrs: {
            businessCode: 'PM44',
            uploadType: 'image',
            isMultiple: true,
            editModel: 0,
            uploadArrys: this.confirmationReturnForm.ownPicFileList || []
          },

        },
        {
          keyName: 'ownAnnexFileList',
          type: UploadList,
          span: 24,
          label: '附件',
          disabled: true,
          attrs: {
            businessCode: 'PM44',
            uploadArrys: this.confirmationReturnForm.ownAnnexFileList || [],
          },
          fileArrysData: (e) => {
            this.fileArrysData('ownAnnexFileList', e)
          }
        },
        {
          type: 'a-select',
          keyName: 'receiveStatus',
          label: '接收情况',
          data: receptionCondition
        },
        {
          type: 'a-date-picker',
          keyName: 'returnTime',
          disabled: true,
          label: '归还时间',
          attrs: {
            valueFormat: 'YYYY-MM-DD 00:00:00',
            format: 'YYYY-MM-DD'
          }
        },
        {
          type: 'a-textarea',
          keyName: 'returnRemark',
          span: 24,
          label: '归还情况说明',
        },
      ];
    },
    rules() {
      let _that = this;
      // 移除接收情况说明必填样式
      const requireDom = document.getElementsByClassName("requiredFormItem")
      if (requireDom.length === 2) {
        requireDom[1].classList.remove("requiredFormItem")
      }
      _that.$refs?.ruleFormInfo?.clearValidate('returnRemark')
      const returnRemark = [{ required: (_that.confirmationReturnForm.receiveStatus == '2' || _that.confirmationReturnForm.receiveStatus == '3') && true, message: '请输入归还情况说明', trigger: 'blur' }]
      return {
        receiveStatus: [{ required: true, message: '请选择接收情况', trigger: 'change' }],
        returnRemark
      };
    }
  },
  created() {
    this.loading = false
    //获取待处理的归还确认
    this.api.getWaitDealInfo({ returnInventoryId: this.$route.query.businessId }).then(res => {
      this.confirmationReturnForm = res.data;
      this.confirmationReturnForm.returnTime = moment().locale('zh-cn').format('YYYY-MM-DD 00:00:00')
      this.getEquipmentInfo(this.confirmationReturnForm.mdProjectId);
    }).catch((err) => {
      this.loading = false
    })
  },
  methods: {
    /**
    * @description: 获取计量设备项目台账信息
    * @return {*}
    */
    async getEquipmentInfo(mdProjectId) {
      detailsItem({ id: mdProjectId }).then(res => {
        this.ownForm = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
      })
    },
    /**
      * @description: 提交处理
     * @return {*}
     */
    handleSubmit() {
      let that = this;
      // 校验表单
      that.$refs.ruleFormInfo.validate((e) => {
        if (e) {
          const { branchCompanyId, projectId, mdName, mdOwnId, mdProjectId, returnTime, returnRemark, receiveStatus } = this.confirmationReturnForm
          let param = {
            branchCompanyId,
            projectId,
            mdName,
            mdOwnId,
            mdProjectId,
            returnTime,
            returnRemark,
            receiveStatus,
            id: this.$route.query.businessId,
            messageId: this.$route.query.messageId,
          }
          this.api.dealReturn(param)
            .then(res => {
              this.loading = false
              if (res.code === '0' || res.data.code === '0') {
                this.$message.success('归还成功！')
                window.postMessage('finish', window.location.origin)
                this.$multiTab.close()
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    /**
     * @description: 获取上传的文件内容
     * @return {*}
     */
    fileArrysData(name, e) {
      this.$set(this.confirmationReturnForm, name, [...e])
    },
  }
}
</script>

<style>
</style>